{% extends 'base.html' %} {% load staticfiles %} {% block title %}网络设备详细{% endblock %} {% block css %}

<!-- Theme style -->
<link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">
<!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="{% static 'dist/css/skins/_all-skins.min.css' %}"> {% endblock %} {% block content %}

<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>网络设备详细信息</h1>
  <ol class="breadcrumb">
    <li><a href={% url 'dashboard' %}><i class="fa fa-dashboard"></i> 主页</a></li>
    <li>资产总表</li>
    <li class="active">网络设备详细信息</li>
  </ol>
</section>
<!-- Main content -->
<section class="content">
  <!-- Default box -->
  <div class="box">
    <div class="box-body">
      <div class="nav-tabs-custom">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="false">基本信息</a></li>
          <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">端口信息</a></li>
          <li class=""><a href="#tab_3" data-toggle="tab" aria-expanded="false">更新日志</a></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active" id="tab_1">
              <div class="row">
                <div class="col-xs-2 text-right">固资编号:</div>
                <div class="col-xs-4">{{ asset.name }}</div>
                <div class="col-xs-2 text-right">SN:</div>
                <div class="col-xs-4">{{ asset.sn }}</div>
              </div>
              <br>
              <div class="row">
                <div class="col-xs-2 text-right">Hostname:</div>
                <div class="col-xs-4">{{ asset.hostname }}</div>
                <div class="col-xs-2 text-right">状态:</div>
                <div class="col-xs-4">{{ asset.get_status_display }}</div>
              </div>
              <br>
              <div class="row">
                <div class="col-xs-2 text-right">维护人:</div>
                <div class="col-xs-4">{{ asset.operation|default:'' }}</div>
                <div class="col-xs-2 text-right">管理IP:</div>
                <div class="col-xs-4">{{ asset.manage_ip|default:'' }}</div>
              </div>
              <br>
              <div class="row">
                <div class="col-xs-2 text-right">业务线:</div>
                <div class="col-xs-4">{{ asset.get_business_unit_display|default:'' }}</div>
                <div class="col-xs-2 text-right">用途:</div>
                <div class="col-xs-4">{{ asset.application }}</div>
              </div>
              <br>
              <div class="row">
                <div class="col-xs-2 text-right">网络设备类型:</div>
                <div class="col-xs-4">{{ networkdevice.get_networkdevice_type_display }}</div>
                <div class="col-xs-2 text-right">厂商:</div>
                <div class="col-xs-4">{{ asset.manufacturer|default:'' }}</div>
              </div>
              <br>
              <div class="row">
                <div class="col-xs-2 text-right">型号:</div>
                <div class="col-xs-4">{{ asset.modelnumber|default:'' }}</div>
                <div class="col-xs-2 text-right">高度(U):</div>
                <div class="col-xs-4">{{ asset.high|default:'' }}</div>
              </div>
              <br>
              <div class="row">
                <div class="col-xs-2 text-right">机房管理单元:</div>
                <div class="col-xs-4">{{ asset.machineRoom|default:'' }}</div>
                <div class="col-xs-2 text-right">机架:</div>
                <div class="col-xs-4">{{ asset.cabinet|default:'N/A' }}</div>
              </div>
              <br>
              <div class="row">
                <div class="col-xs-2 text-right">机房:</div>
                <div class="col-xs-4">{{ asset.idc|default:'' }}</div>
              </div>
              <br>
              <div class="row">
                <div class="col-xs-2 text-right">备注:</div>
                <div class="col-xs-6">{{ asset.memo|default:'' }}</div>
              </div>
              <br>
              <p style=" margin:0 auto; text-align:center;">
                <button class="btn btn-default " align="center" data-toggle="modal" data-target="#myModal">修改</button> 
              </p>
          </div>
          <form class="form-inline content_size" action="{% url 'networkdevicedetail' asset.id %}" method="post">
            {% csrf_token %}
            <div class="modal fade" id='myModal' tabindex="-1" role="dialog" aria-labelledby='myModelLabel' aria-hidden="true">
              <div class="modal-dialog modal-lg">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">设备信息修改</h4>
                  </div>
                  <div class="modal-body">
                    <div class="form-group">
                      <label for="modify">固资编号</label>
                      <input type="text" class="form-control" type="text" name='name' placeholder= {{ asset.name }} readonly>
                      <label for="modify">SN</label>
                      <input type="text" class="form-control" name='sn' value= {{ asset.sn }}>
                      <label for="modify">机房</label>
                      <input type="text" class="form-control" name='idc' value= {{ asset.idc|default:"" }}>
                    </div>
                    <div class="form-group">
                      <label for="modify">机柜</label>
                      <input type="text" class="form-control" name='cabinet' value= {{ asset.cabinet|default:"" }}>
                      <label for="modify">业务线</label>
                      <select class="form-control" name='business_unit'>
                                    <option value='0' {% if asset.business_unit == 0 %} selected="selected" {% endif %}>领骏</option>
                                    <option value='1' {% if asset.business_unit == 1 %} selected="selected" {% endif %}>驰联</option>
                                  </select>
                      <label for="modify">hostname</label>
                      <input type="text" class="form-control" name='hostname' value= {{ asset.hostname|default:"" }}>
                    </div>
                    <div class="form-group">
                      <label for="modify">型号</label>
                      <input type="text" class="form-control" name='modelnumber' value='{{ asset.modelnumber|default:"" }}'>
                      <label for="modify">厂商</label>
                      <input type="text" class="form-control" name='manufacturer' value= {{ asset.manufacturer|default:"" }}>
                      <label for="modify">状态</label>
                      <select class="form-control" name='status'>
                                    <option value='0' {% if asset.status == 0 %} selected="selected" {% endif %}>运营</option>
                                    <option value='1' {% if asset.status == 1 %} selected="selected" {% endif %}>闲置</option>
                                    <option value='2' {% if asset.status == 2 %} selected="selected" {% endif %}>待启用</option>
                                    <option value='3' {% if asset.status == 3 %} selected="selected" {% endif %}>故障</option>
                                    <option value='4' {% if asset.status == 4 %} selected="selected" {% endif %}>备用</option>
                                  </select>
                    </div>
                    <div class="form-group">
                      <label for="modify">管理IP</label>
                      <input type="text" class="form-control" name='manage_ip' value= {{ asset.manage_ip|default:"" }}>
                      <label for="modify">维护人</label>
                      <input type="text" class="form-control" name='operation' value= {{ asset.operation|default:"" }}>
                      <label for="modify">设备高度(U)</label>
                      <input type="text" class="form-control" name='high' value= {{ asset.high|default:"" }}>
                    </div>
                    <div class="form-group">
                      <label for="modify">机房管理单元</label>
                      <input type="text" class="form-control" name='machineRoom' value= {{ asset.machineRoom|default:"" }}>
                      <label for="modify">用途</label>
                      <input type="text" class="form-control" name='application' value= {{ asset.application|default:"" }}>
                      <label for="modify">备注</label>
                      <input type="text" class="form-control" name='memo' value= {{ asset.memo }}>
                    </div>
                    <div class="form-group">
                      <label for="modify">修改原因<font color='#ff0000'>*</font></label>
                      <input type="text" class="form-control" name='reason' required>
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="submit" name="submit" value="networkdevice_edit" class="btn btn-primary">确认</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                  </div>
                </div>
              </div>
            </div>
          </form>
          <!-- /.tab-pane tab_1 -->
          <div class="tab-pane" id="tab_2">
            <h4 class="box-title">{{ asset.hostname }} 端口信息:</h4>
            <table id="port_table" border="1" class="display table table-bordered table-striped">
              <thead>
                <tr>
                  <th><input type="checkbox" id ='checkAll'></th>
                  <th>名称</th>
                  <th>类型</th>
                  <th>状态</th>
                  <th>互联设备</th>
                  <th>互联端口</th>
                  <th>互联客户</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                {% for port in ports %}
                <tr>
                  <td text-align='center'><input type="checkbox" name="order_checkbox"></td>
                  <td id="port_name">{{ port.name }}</td>
                  <td id="port_type">{{ port.get_port_type_display }}</td>
                  <td id="port_status">{{ port.get_port_status_display }}</td>
                  {% if port.connect_port %}
                  <td id="connect_networkdevice">
                    <a href="/networkdevicedetail/{{ port.connect_port.networkdevice.id }}" target=_blank >{{ port.connect_port.networkdevice.hostname|default:'' }}</a>
                  </td>
                  {% else %}
                  <td id="connetc_server"><a href="/serverdetail/{{ port.connect_server.asset.id }}" target=_blank >{{ port.connect_server.asset|default:'' }}</a></td>
                  {% endif %}
                  <td id="connect_port">{{ port.connect_port|default:'' }}</td>
                  <td id="connect_user">{{ port.connect_user|default:'' }}</td>
                  <td>
                    <button type="button" class="btn btn-sm btn-info" onclick="editport(this)" id="editport">修改</button>
                    <button type="button" class="btn btn-sm btn-danger" onclick="delport(this)" id="delport">删除</button>
                  </td>
                </tr>
                {% empty %}
                <tr>没有端口信息！</tr>
                {% endfor %}
              </tbody>
            </table>
            <button type="submit" class="btn btn-default" id="connectdelports">删除链接关系</button>
            <a href={% url 'interconnectimport' %} target=_blank>
            <button type="submit" class="btn btn-default pull-right " >连接关系导入</button>
            </a>
            <a href={% url 'portimport' asset.id %} target=_blank>
            <button type="submit" class="btn btn-default pull-right " >端口导入</button>
            </a>
            <button class="btn btn-default pull-right " data-toggle="modal" data-target="#portaddModal">单个端口添加</button>
            <br />
            <form class="form-horizontal" role="form" action="{% url 'networkdevicedetail' asset.id %}" method="post">
              {% csrf_token %}
              <div class="modal fade" id='portedit' tabindex="-1" role="dialog" aria-labelledby='myModelLabel' aria-hidden="true">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                      <h4 class="modal-title">端口修改</h4>
                    </div>
                    <div class="modal-body">
                      <form class="form-horizontal" role="form">
                      <div class="form-group">
                        <label for="modify" class="col-sm-2 control-label">端口名称:</label>
                        <div class="col-sm-4">
                          <input type="text" class="form-control" name='name' readonly id="port_nametext">
                        </div>
                        <label for="modify" class="col-sm-2 control-label">状态:</label>
                        <div class="col-sm-4">
                          <select class="selector input-sm" name='port_status' id="port_statustext">
                            <option value='0' >运营</option>
                            <option value='1' >闲置</option>
                            <option value='2' >故障</option>
                          </select>
                        </div>  
                      </div>
                      <div class="form-group">
                        <label for="modify" class="col-sm-2 control-label">对接客户:</label>
                        <div class="col-sm-4">
                        <input type="text" class="form-control" name='connect_user' id="connect_usertext">
                        </div>
                        <label for="modify" class="col-sm-2 control-label">类型:</label>
                        <div class="col-sm-4">
                          <select class="selector input-sm" name='port_type' id="port_typetext">
                            <option value='0' >网络设备互联</option>
                            <option value='1' >服务器互联</option>
                            <option value='2' >客户互联</option>
                            <option value='3' >待定</option>
                          </select>
                        </div>
                      </div>
                      <div class="form-group">
                        <label for="modify" class="col-sm-2 control-label">修改原因<font color='#ff0000'>*</font></label>
                        <div class="col-sm-4">
                        <input type="text" class="form-control" name='edit_reason' required>
                        </div>
                      </div>
                      </form>
                    </div>
                    <div class="modal-footer">
                      <button type="submit" name="submit" value="port_edit" class="btn btn-primary">确认</button>
                      <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <form class="form-horizontal" action="{% url 'networkdevicedetail' asset.id %}" method="post">
              {% csrf_token %}
              <div class="modal fade" id='portaddModal' tabindex="-1" role="dialog" aria-labelledby='myModelLabel' aria-hidden="true">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                      <h4 class="modal-title">添加端口</h4>
                    </div>
                    <div class="modal-body">
                      <form class="form-horizontal" role="form">
                      <div class="form-group">
                        <label for="modify" class="col-sm-2 control-label">端口名称:</label>
                        <div class="col-sm-4">
                          <input type="text" class="form-control" name='name'>
                        </div>
                        <label for="modify" class="col-sm-2 control-label">状态:</label>
                        <div class="col-sm-4">
                          <select class="selector input-sm" name='port_status'>
                            <option value='0' >运营</option>
                            <option value='1' >闲置</option>
                            <option value='2' >故障</option>
                          </select>
                        </div>  
                      </div>
                      <div class="form-group">
                        <label for="modify" class="col-sm-2 control-label">对接客户:</label>
                        <div class="col-sm-4">
                          <input type="text" class="form-control" name='connect_user'>
                        </div>
                        <label for="modify" class="col-sm-2 control-label">端口类型:</label>
                        <div class="col-sm-4">
                          <select class="selector input-sm" name='port_type'>
                            <option value='0' >网络设备互联</option>
                            <option value='1' >服务器互联</option>
                            <option value='2' >客户互联</option>
                            <option value='3' >待定</option>
                          </select>
                        </div>
                      </div>
                      </form>
                    </div>  
                    <div class="modal-footer">
                      <button type="submit" name="submit" value="port_add" class="btn btn-primary">确认</button>
                      <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <form class="form-horizontal" action="{% url 'networkdevicedetail' asset.id %}" method="post">
              {% csrf_token %}
              <div class="modal fade" id='portdelModal' tabindex="-1" role="dialog" aria-labelledby='myModelLabel' aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                      <h4 class="modal-title">删除端口</h4>
                    </div>
                    <div class="modal-body">
                      <form class="form-horizontal" role="form">
                      <div class="form-group">
                        <label for="modify" class="col-sm-2 control-label">端口名称:</label>
                        <div class="col-sm-4">
                          <input type="text" class="form-control" name='name' readonly id="delport_name">
                        </div>
                      </div>  
                      <div class="form-group">
                        <label for="modify" class="col-sm-2 control-label">删除原因<font color='#ff0000'>*</font></label>
                        <div class="col-sm-4">
                          <input type="text" class="form-control" name='edit_reason' required>
                        </div>
                      </div>
                      </form>
                    </div>
                    <div class="modal-footer">
                      <button type="submit" name="submit" value="port_del" class="btn btn-primary">确认</button>
                      <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>        
                  </div>
                </div>
              </div>
            </form>
        <form class="form-horizontal" role="form" action="{% url 'networkdevicedetail' asset.id %}" method="post">
             {% csrf_token %}
             <div class="modal fade" id='portconnectdelModal' tabindex="-1" role="dialog" aria-labelledby='myModelLabel' aria-hidden="true">
               <div class="modal-dialog modal-lg">
                 <div class="modal-content">
                   <div class="modal-header">
                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                     <h4 class="modal-title">链接关系删除</h4>
                   </div>
                   <div class="modal-body">
                     <form class="form-horizontal" role="form">
                     <div class="form-group">
                       <label for="modify" class="col-sm-2 control-label">删除端口:</label>
                       <div class="col-sm-6">
                          <input type="text" class="form-control" name='portconnectdel' readonly id='portconnectdel'>
                       </div>
                     </div>
                     <div class="form-group">
                       <label for="modify" class="col-sm-2 control-label">删除原因<font color='#ff0000'>*</font></label>
                       <div class="col-sm-6">
                       <input type="text" class="form-control" name='edit_reason' required>
                       </div>
                     </div>
                     </form>
                   </div>
                   <div class="modal-footer">
                     <button type="submit" name="submit" value="portconnectdel" class="btn btn-primary">确认</button>
                     <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                   </div>
                 </div>
               </div>
             </div>
           </form>
          </div>
          <!-- /.tab-pane tab_2 -->
          <div class="tab-pane" id="tab_3">
            <h4><b>{{ asset.hostname }} 日志信息:</b></h4>
            <table id="eventlog_table" border="1" class="display table table-bordered table-striped">
              <thead>
                <tr>
                  <th>类型</th>
                  <th>详细内容</th>
                  <th>操作原因</th>
                  <th>操作时间</th>
                  <th>操作人</th>
                </tr>
              </thead>
              <tbody>
                {% for log in eventlog %}
                <tr>
                  <td id="log_event_type">{{ log.get_event_type_display }}</td>
                  <td id="log_detail">{{ log.detail }}</td>
                  <td id="log_reason">{{ log.reason }}</td>
                  <td id="log_date">{{ log.date|date:"Y-m-d  H:i:s" }}</td>
                  <td id="log_user">{{ log.user }}</td>
                </tr>
                {% empty %}
                <tr>没有日志信息！</tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          <!-- /.tab-pane tab_3 -->
        </div>
        <!-- /.tab-content -->
      </div>
    </div>
    <!-- /.box-body -->
    <div class="box-footer">
      <i class="fa fa-angle-double-left"></i>&nbsp;&nbsp;<a href="{% url 'index' %}"><strong>返回资产列表页</strong></a>
    </div>
    <!-- /.box-footer-->
  </div>
  <!-- /.box -->
</section>
<!-- /.content -->

<script>
  function editport(obj) {
    var tr = $(obj).parent().parent();
    var port_name = tr.children("td#port_name").text();
    var port_type = tr.children("td#port_type").text();
    var port_status = tr.children("td#port_status").text();
    var connect_device = tr.children("td#connect_networkdevice").text();
    var connect_port = tr.children("td#connect_port").text();
    var connect_server = tr.children("td#connect_server").text();
    var connect_user = tr.children("td#connect_user").text();
    $('#port_nametext').val(port_name);
    if (port_type == "网络设备互联") {
      $(".selector").val("0");
    } else if (port_type == "服务器互联") {
      $(".selector").val("1");
    } else if (port_type == "客户互联") {
      $(".selector").val("2");
    } else if (port_type == "待定") {
      $(".selector").val("3");
    };

    if (port_status == "运营") {
      $("#port_statustext").val("0");
    } else if (port_status == "闲置") {
      $("#port_statustext").val("1");
    } else if (port_status == "故障") {
      $("#port_statustext").val("2");
    };
    $('#connect_devicetext').val(connect_device);
    $('#connect_porttext').val(connect_port);
    $('#connect_servertext').val(connect_server);
    $('#connect_usertext').val(connect_user);
    $('#portedit').modal('show');
  };

  function delport(obj) {
    var tr = $(obj).parent().parent();
    var port_name = tr.children("td#port_name").text();
    $('#delport_name').val(port_name);
    $('#portdelModal').modal('show');
  };
</script>
{% endblock %} {% block script %}
<!-- DataTables -->
 <link rel="stylesheet" href="{% static 'plugins/datatables/jquery.dataTables.min.css' %}">
 <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
 <script src="{% static 'plugins/datatables/dataTables.bootstrap.min.js' %}"></script>
<!-- SlimScroll -->
<script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}"></script>
<!-- FastClick -->
<script src="{% static 'plugins/fastclick/fastclick.min.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'dist/js/adminlte.min.js' %}"></script>
<!-- AdminLTE for demo purposes -->
<script src="{% static 'dist/js/demo.js' %}"></script>
<!-- page script -->
<script>
$(document).ready( function () {
    $('#eventlog_table').DataTable( {
    "order": [[ 3, "desc" ]]
 } )
} );
$(document).ready( function () {
    $('#port_table').DataTable( {
        columnDefs: [ {
            orderable: false,
            className: 'dt-center',
            targets:   0
        } ],
        select: {
            style:   'multi',
            selector: 'td:first-child',
        },
        order: [[ 1, 'asc' ]]
 } )
} );
</script>
<script>
$("#checkAll").click(function () {
        if (this.checked) {
            $("input[name='order_checkbox']").each(function () {
                this.checked = true;
            });
        } else {
            $("input[name='order_checkbox']").each(function () {
                this.checked = false;
            });
        }
    }
);
</script>
<script>
      $('#connectdelports').click(function () {
        var ports = [ ];
         $("input[name='order_checkbox']:checked").each(function () {
          var tr = $(this).parent().parent();
          var port_name = tr.children("td#port_name").text();
          ports.push(port_name);
      });
   if (ports.length == 0){
      alert('请至少勾选一个');
   }
   else {
      $('#portconnectdel').val(ports);
      $('#portconnectdelModal').modal('show');
   }
    });
</script>

{% endblock %}
